<template>
	<div class="single-result-show-area">
		<div class="left">
			<div class="left-value">
				<el-tag class="each-left-value" v-for="(item, index) in showData.nounSet" :key="index" :style="{ background: showColorOptions[item.type]['color'] }">{{ item.word }}</el-tag>
			</div>
		</div>
		<div class="right">
			<h2 class="right-name">词性类别图示</h2>
			<div class="right-value">
				<el-tag class="each-right-value" v-for="(item, index) in showColorOptions" :key="index" :style="{ background: item.color }">{{ item.label }}</el-tag>
			</div>
		</div>
	</div>
</template>

<script>
export default {

	props: {
		showData: { type: Object 	}
	},

	data: function () {
		return {
			showColorOptions: { // 显示的颜色类别
				"学校": { label: "学校", color: "#d07f7f" },
        "时间词": { label: "时间词", color: "#488fce" },
        "动物名": { label: "动物名", color: "#c7aee7" },
        "工厂": { label: "工厂", color: "#cccccc" },
        "银行": { label: "银行", color: "#99cc67" },
        "生物名": { label: "生物名", color: "#96dbf8" },
        "食品": { label: "食品", color: "#986699" },
        "药品": { label: "药品", color: "#ffcccb" },
        "地名": { label: "地名", color: "#67ccaa" },
        "疾病": { label: "疾病", color: "#ff9899" },
        "植物名": { label: "植物名", color: "#ffcb99" },
        "化学品名": { label: "化学品名", color: "#96dbf8" },
        "人名": { label: "人名", color: "#8ea4de" },
        "学术词汇": { label: "学术词汇", color: "#c9aaca" },
        "公司名": { label: "公司名", color: "#9acccd" },
        "工作": { label: "工作", color: "#4dd9e6" },
        "医院": { label: "医院", color: "#f48363" },
        "酒店宾馆": { label: "酒店宾馆", color: "#bec3cc" },
        "机构": { label: "机构", color: "#b9eca0" },
        "物品名": { label: "物品名", color: "#b73737" },
			}
		}
	}

}
</script>

<style lang="less" scoped>
	.single-result-show-area {
		width: 100%;
		height: calc(~'100% - 60px');
		padding-top: 30px;
		padding-bottom: 30px;
	}

	.left, .right {
		float: left;
		height: 100%;
		overflow: auto;
	}

	.left {
		width: 65%;
		border-right: solid 1px #e6e6e6;
	}

	.right {
		width: calc(~'35% - 1px');
		box-sizing: border-box;
		padding: 0 20px;
	}

	.left-value {
		padding: 0 20px;
		box-sizing: border-box;
	}

	.right-name {
		font-family: PingFangSC-Regular;
		letter-spacing: 1px;
		font-size: 18px;
		padding-left: 10px;
		font-weight: 500;
		color: #333333;
	}

	.each-left-value, .each-right-value {
		color: #333333;
		margin: 6px;
		cursor: pointer;
	}
</style>
